<template>
	<div class="form-content">
		<div class="form-item">
			<div class="inp-name">所属校区</div>
			<div>
				<el-select
					v-model="classFormState.schoolId"
					placeholder="请选择"
					size="large"
					filterable
					@change="handlerSchollChange"
				>
					<el-option
						v-for="item in schollOptions"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					/>
				</el-select>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">课次</div>
			<div>
				<el-input
					placeholder="请输入"
					disabled=""
					v-model="classFormState.times"
				></el-input>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">上课人数</div>
			<div>
				<el-input
					placeholder="请输入"
					oninput="value=value.replace(/[^\d]/g,'')"
					v-model.number="classFormState.population"
				></el-input>
			</div>
		</div>
		<!-- <div class="form-item">
      <div class="inp-name">授课老师</div>
      <div>
        <el-input placeholder="请输入" v-model="classFormState.courseType"></el-input>
      </div>
    </div> -->
		<div class="form-item">
			<div class="inp-name">授课老师</div>
			<div>
				<el-select
					v-model="classFormState.staffId"
					placeholder="请选择"
					size="large"
				>
					<el-option
						v-for="item in teacherOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">助教</div>
			<div>
				<el-select
					v-model="classFormState.assistantId"
					placeholder="请选择"
					size="large"
				>
					<el-option
						v-for="item in teacherOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">教室</div>
			<div>
				<el-select
					v-model="classFormState.roomId"
					placeholder="请选择"
					size="large"
				>
					<el-option
						v-for="item in roomNameOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">上课时间类型</div>
			<div>
				<el-select
					v-model="classFormState.timeInterval"
					placeholder="请选择"
					size="large"
				>
					<el-option
						v-for="item in classTimeTypeOption"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">开班日期</div>
			<div>
				<el-date-picker
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="请选择"
					:disabled-date="isDisabled"
					v-model="classFormState.openingTime"
				/>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">上课时间</div>
			<div>
				<div
					class="p-flex p-ai-c m-b-15"
					v-for="(item, index) in classFormState.classHoursList"
					:key="index"
				>
					<el-time-picker
						v-model="item.time"
						is-range
						format="HH:mm"
						value-format="YYYY-MM-DD HH:mm:ss"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						@change="timeChange"
					/>
					<!-- <div class="m-l-10">
						<el-button
							type="primary"
							plain
							:icon="Plus"
							@click="changeClassHours('Plus', index)"
						/>
						<el-button
							v-if="classFormState.classHoursList.length > 1"
							type="danger"
							plain
							:icon="Minus"
							@click="changeClassHours('Minus', index)"
						/>
					</div> -->
				</div>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">毕业作品要求</div>
			<div>
				<el-input
					type="textarea"
					autosize
					placeholder="请输入"
					v-model="classFormState.graduationTask"
				/>
			</div>
		</div>
		<div class="form-item">
			<div class="inp-name">大纲</div>
			<div class="table">
				<div class="title">
					<div>课次</div>
					<div>大纲内容</div>
				</div>
				<div class="content-list">
					<div
						class="table-item"
						v-for="(item, index) in classFormState.arrangs"
						:key="index"
					>
						<div>{{ item.times }}</div>
						<div>
							<el-input
								placeholder="在此输入大纲内容"
								v-model="item.outline"
							></el-input>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted,
	getCurrentInstance,
	inject,
	defineExpose,
	computed
} from "vue";
import { Minus, Plus } from "@element-plus/icons-vue";
const schollOptions = ref([]); // 校区
const teacherOptions = ref([]); // 老师// 助教
// const assistantOptions = ref([]); // 助教
const roomNameOptions = ref([]); // 教室
const { proxy } = getCurrentInstance();

const nowTimes = inject("times");
const courseId = inject("courseId");

onMounted(() => {
	classFormState.value.times = nowTimes.value;
	handlerOutlines(nowTimes.value);
	getDropdown();
});

// 是否禁用某个日期
const isDisabled = (time) => {
	const nowTime = new Date()
	return time.getTime() < nowTime.getTime()-(24*60*60*1000)
}

const handlerOutlines = (len) => {
	if (len) {
		console.log(len);
		for (let i = 1; i <= len; i++) {
			classFormState.value.arrangs.push({ outline: "", times: i });
		}
	}
};

// 获取校区下拉列表
const getDropdown = () => {
	proxy.$API.public.findSchool.get().then((res) => {
		schollOptions.value = res.data;
	});
};

const handlerSchollChange = (val) => {
	classFormState.value.roomId = null
	classFormState.value.staffId = null
	classFormState.value.assistantId = null
	teacherOptions.value = []
	getFindRoom(val)
	getFindEnterprise(val)
}

// 获取教师、助教
const getFindEnterprise = (id) => {
	const params = {
		departmentId: id,
		type: 21,
		current: 1,
		size: 99999    //当前页数先传个极大值，后面改为下拉框到底后分页请求
	}
	proxy.$API.public.findEnterprise.get(params).then((resp) => {
    resp.data.records.forEach(item => {
      teacherOptions.value.push({
        value: item.id,
        label: item.name
      })
    })
  })
}

// 查询教室
const getFindRoom = (id) => {
	proxy.$API.public.findRoom.get({schoolId: id}).then((resp) => {
    resp.data.forEach(item => {
      roomNameOptions.value.push({
        value: item.id,
        label: item.name
      })
    })
  })
}

const classFormState = ref({
	schoolId: "", // 校区
	times: 1, // 总课次
	courseId: courseId.value, // 课程ID
	population: null, // 上课人数
	staffId: "", // 授课老师
	assistantId: "", // 助教
	roomId: "", // 课室
	timeInterval: "", // 上课时间类型
	openingTime: "", // 开班日期
	graduationTask: "", // 毕业作品要求
	arrangs: [], // 大纲
	beginClass: null, //开始上课时间
	endClass: null, //开始上课时间
	classHoursList: [{ time: [] }], // 添加上课时间框   2期开始
});

const classTimeTypeOption = reactive([
	{ value: "白天课", label: "白天课" },
	{ value: "周末课", label: "周末课" },
]);

const timeChange = (el) => {
	if (el.length) {
		classFormState.value.beginClass = el[0];
		classFormState.value.endClass = el[1];
	} else {
		classFormState.value.beginClass = null;
		classFormState.value.endClass = null;
	}
	console.log(el, 257);
};

// 添加上课时间框   2期开始
const changeClassHours = (type, index) => {
	if (type === "Plus") {
		console.log(type, index, 257);
		classFormState.value.classHoursList.splice(index + 1, 0, {
			title: null,
		});
	} else {
		classFormState.value.classHoursList.splice(index, 1);
	}
};

defineExpose({ classFormState });
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
